/**
 * Author: Shen Yanqiu
 * Date: 2018-02-28
 * Time: 15:01
 *
 */
import React from 'react';
import { Page } from 'components';
import { Row, Col, Table, Card, Icon } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import PropTypes from 'prop-types';
import styles from './style.less';
import TopOperation from 'components/TopOperation';
import TopRightButton from "components/TopOperation/TopRightButton";

const settings = {
  designation: true, // 名称输入框
  status: false, // 状态选择框
  ownership: false, // 所属选择框
  section: false, // 部门选择框
  starlevel: true, // 星级选择框
  object: true, // 对象选择框
  time: true, // 时间选择框
};
class StarRatingRanking extends React.Component {
  static propTypes = {
    loading: PropTypes.object,
    dispatch: PropTypes.func,
    starRatingRanking: PropTypes.object,
  };
  state = {
    objInfo: "人员",
  };
  render () {
    const { loading, dispatch, starRatingRanking } = this.props;
    const { list, pagination } = starRatingRanking;
    const objSelect = {
      1: "人员",
      2: "部门",
      3: "社团",
    };
    const searchHandler = (values) => {
      console.log(values);
      if (values.obj) {
        this.setState({
          objInfo: objSelect[values.obj],
        });
      }
    };
    const _getColumnConfig = () => {
      return [{
        width: 150,
        title: '排名',
        dataIndex: 'ranking',
        key: 'ranking',
      }, {
        width: 120,
        title: '名称',
        dataIndex: 'name',
        key: 'name',
      }, {
        width: 200,
        title: '星级',
        dataIndex: 'starlevel',
        key: 'starlevel',
      }, {
        width: 200,
        title: '时间',
        dataIndex: 'time',
        key: 'time',
      }, {
        width: 100,
        title: '环比',
        dataIndex: 'huanbi',
        key: 'huanbi',
        render: (text, record) => {
          return (
            <div>
              {
                text > 0 ?
                  <span className={styles.green}>{ text }</span>
                  :
                  <span className={styles.red}>{text}</span>
              }
            </div>
          );
        },
      }, {
        width: 50,
        key: "upOrDown",
        render: (text, record) => {
          return (
            <div>
              {
                record.huanbi > 0 ?
                  <span className={styles.green}><Icon type="caret-up" /></span>
                  :
                  <span className={styles.red}><Icon type="caret-down" /></span>
              }
            </div>
          );
        },
      }];
    };
    const tableProps = {
      loading: loading.effects['starRatingRanking/loadTableList'],
      columns: _getColumnConfig(),
      dataSource: list,
      pagination,
      rowKey: r => r.id,
      onChange (_pagination) {
        dispatch({
          type: 'starRatingRanking/loadTableList',
          payload: {
            current: _pagination.current,
            pageSize: _pagination.pageSize,
          },
        });
      },
    };
    const clickHandle = () => {
      dispatch(
        routerRedux.push("/star-rating/handMove")
      );
    };
    return (
      <Page loading={loading.effects['starRatingRanking/firstLoad']}>
        <TopOperation SearchData={searchHandler} {...settings} />
        <Row className={styles.starRatingRanking}>
          <Col>
            <Card title={<span className={styles.CardTitle}>{this.state.objInfo}排行榜</span>} bordered={false} className={styles.CardTable}>
              <Table
                {...tableProps}
              />
            </Card>
          </Col>
        </Row>
        <TopRightButton clickHandle={clickHandle} contentText={"手动录入"} />
      </Page>
    );
  }
}
export default connect(({ loading, starRatingRanking }) => ({ loading, starRatingRanking }))(StarRatingRanking);
